<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>最简单的布局</title>
<script type="text/javascript" src="./scripts/jquery-1.9.0.js"></script>

<script type="text/javascript" src="./scripts/jquery-ui/js/jquery-ui-1.10.0.custom.js"></script>
<link rel="stylesheet" type="text/css"	href="./scripts/jquery-ui/css/ui-lightness/jquery-ui-1.10.0.custom.css" />

<script type="text/javascript" src="./scripts/jquery.layout-latest.js"></script>
<link rel="stylesheet" type="text/css"	href="./scripts/layout-default-latest.css" />
<script type="text/javascript" src="./scripts/debug.js"></script>
<style type="text/css">

/* inner divs inside Outer East/West panes */
.header { 
	background: #80ade5 url(../img/80ade5_40x100_textures_04_highlight_hard_100.png) 0 50% repeat-x;
	border-bottom: 1px solid #777;
	font-weight: bold;
	text-align: center;
	padding: 2px 0 4px;
	position: relative;
	overflow: hidden;
}
.subhead ,
.footer {
	background: #d6d6d6 url(../img/d6d6d6_40x100_textures_02_glass_80.png) 0 50% repeat-x;
	padding: 3px 10px;
	font-size: 0.85em;
	position: relative;
	overflow: hidden;
	white-space: nowrap;
	
}
.subhead { border-bottom: 1px solid #777; }
.footer  { border-top: 1px solid #777; }
/* .footer  { border-top: 1px solid #BBB; } */
.content {
	padding:	10px;
	position:	relative;
	overflow:	auto;
}
</style>	
<script type="text/javascript">
var outerLayout;
	$(document).ready(function() {
		outerLayout=	$('body').layout({
			applyDemoStyles : false
		});
	});
</script>
</head>
<body>
	<div class="ui-layout-center">
	
	<div class="header">中心面板-header</div>

	<div class="content">
		<h3><b>中心面板-content</b></h3>
		<ul>
			<li><a href="#" onClick="outerLayout.toggle('north')">Toggle North</a></li>
			<li><a href="#" onClick="outerLayout.toggle('south')">Toggle South</a></li>
			<li><a href="#" onClick="outerLayout.toggle('west')"> Toggle West</a></li>
			<li><a href="#" onClick="outerLayout.toggle('east')"> Toggle East</a></li>
			<li><a href="#" onClick="outerLayout.hide('north')">Hide North</a></li>
			<li><a href="#" onClick="outerLayout.hide('south')">Hide South</a></li>
			<li><a href="#" onClick="outerLayout.show('south', false)">Unhide South</a></li>
			<li><a href="#" onClick="outerLayout.hide('east')"> Hide East</a></li>
			<li><a href="#" onClick="outerLayout.show('east', false)">Unhide East</a></li>
			<li><a href="#" onClick="outerLayout.open('east')"> Open East</a></li>
			<li><a href="#" onClick="outerLayout.open('north'); outerLayout.sizePane('north', 'auto')">  Resize North="auto"</a></li>
			<li><a href="#" onClick="outerLayout.sizePane('north', 100); outerLayout.open('north')">  Resize North=100</a></li>
			<li><a href="#" onClick="outerLayout.sizePane('north', 300); outerLayout.open('north')">  Resize North=300</a></li>
			<li><a href="#" onClick="outerLayout.sizePane('north', 10000); outerLayout.open('north')">Resize North=10000</a></li>
			<li><a href="#" onClick="outerLayout.open('south'); outerLayout.sizePane('south', 'auto')">  Resize South="auto"</a></li>
			<li><a href="#" onClick="outerLayout.sizePane('south', 100); outerLayout.open('south')">  Resize South=100</a></li>
			<li><a href="#" onClick="outerLayout.sizePane('south', 300); outerLayout.open('south')">  Resize South=300</a></li>
			<li><a href="#" onClick="outerLayout.sizePane('south', 10000); outerLayout.open('south')">Resize South=10000</a></li>
			<li><a href="#" onClick="outerLayout.panes.north.css('backgroundColor','#FCC')">North Color = Red</a></li>
			<li><a href="#" onClick="outerLayout.panes.north.css('backgroundColor','#CFC')">North Color = Green</a></li>
			<li><a href="#" onClick="outerLayout.panes.north.css('backgroundColor','')">    North Color = Default</a></li>
			<li><a href="#" onClick="alert('outerLayout.name = \''+outerLayout.options.name+'\'')">Show Layout Name</a></li>
			<li><a href="#" onClick="showOptions(outerLayout,'defaults')">Show Options.Defaults</a></li>
			<li><a href="#" onClick="showOptions(outerLayout,'north')">   Show Options.North</a></li>
			<li><a href="#" onClick="showOptions(outerLayout,'south')">   Show Options.South</a></li>
			<li><a href="#" onClick="showOptions(outerLayout,'west')">    Show Options.West</a></li>
			<li><a href="#" onClick="showOptions(outerLayout,'east')">    Show Options.East</a></li>
			<li><a href="#" onClick="showOptions(outerLayout,'center')">  Show Options.Center</a></li>
			<li><a href="#" onClick="showState(outerLayout,'container')"> Show State.Container</a></li>
			<li><a href="#" onClick="showState(outerLayout,'north')">     Show State.North</a></li>
			<li><a href="#" onClick="showState(outerLayout,'south')">     Show State.South</a></li>
			<li><a href="#" onClick="showState(outerLayout,'west')">      Show State.West</a></li>
			<li><a href="#" onClick="showState(outerLayout,'east')">      Show State.East</a></li>
			<li><a href="#" onClick="showState(outerLayout,'center')">    Show State.Center</a></li>
		</ul>
	</div>

	<div class="footer">Automatically positioned footer</div>

	
	</div>
	<div class="ui-layout-north">北面板</div>
	<div class="ui-layout-south">南面板</div>
	<div class="ui-layout-east">东面板</div>
	<div class="ui-layout-west">西面板</div>
</body>

</html>